<template>
	<view class="content">
		<!-- 返回主页 -->
		<view class="back" @click="back">
			<view class="backicon"></view>
		</view>
		<view class="toptitle">
			<text>修改密码</text>
		</view>
		<view class="fun">
			<view class="pwdtext">
				<text>原密码:</text>
			</view>
			<view class="pwdinput">
				<input :password="showPassword" class="inputstyle" placeholder="请输入原密码" focus v-model="pwd1" />
				<image
					style="margin-left: 600rpx;width: 30rpx; height: 55rpx;position: absolute; margin-top: -50rpx;z-index: 10;"
					@click="changePassword" :src='hnit_url+"images/eye.svg"'></image>
			</view>
			<view class="pwdtext">
				<text>新密码:</text>
				<view class="title"><text class="uni-form-item__title"
						style="font-size: 30rpx; color: red;">新密码,以字母开头,长度在6~18之间,包含字母、数字</text></view>
			</view>
			<view class="pwdinput">
				<input :password="showPwd" class="inputstyle" placeholder="请输入新密码" focus v-model="pwd2" />
				<image
					style="margin-left: 600rpx;width: 30rpx;margin-top: -47rpx; height: 55rpx;position: absolute;z-index: 10;"
					@click="changePwd" :src='hnit_url+"images/eye.svg"'></image>
			</view>
			<view class="pwdtext">
				<text>确认密码:</text>
			</view>
			<view class="pwdinput">
				<input :password="showpwd" class="inputstyle" placeholder="请确认新密码" focus v-model="pwd3" />
				<image
					style="margin-left: 600rpx;width: 30rpx;margin-top: -49rpx; height: 55rpx;position: absolute;z-index: 10;"
					@click="changepwd" :src='hnit_url+"images/eye.svg"'></image>
			</view>
		</view>
		<view style="margin-top: 40rpx;">
			<u-button text="修改密码" color="linear-gradient(to right, rgb(0, 170, 255), rgb(85, 85, 255))" shape="circle"
				size="large" customStyle="width: 650rpx" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		AVATARURL,
		HNIT_URL,
		MONITOR,
		STUNAME,
		USERNAME,
		IDENTITY,
		TNAME,
		SESSION_KEY,
		OPENID,
		WXNAME
	} from "@/constants/index.js";
	export default {
		data() {
			return {
				hnit_url:HNIT_URL,
				//点击眼睛查看密码
				showPassword: true,
				//点击眼睛查看密码
				showPwd: true,
				//点击眼睛查看密码
				showpwd: true,
				//原密码
				pwd1: "",
				//新密码
				pwd2: "",
				//确认密码
				pwd3: "",
				//用于比较
				pwd: ""
			}
		},
		methods: {
			//点击查看眼睛的状态
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			//点击查看眼睛的状态
			changePwd() {
				this.showPwd = !this.showPwd;
			},
			//点击查看眼睛的状态
			changepwd() {
				this.showpwd = !this.showpwd;
			},
			// 返回上一页
			back() {
				uni.reLaunch({
					url: "../showinfo/showinfo"
				})
			},
			submit() {
				let stuid = uni.getStorageSync(USERNAME)
				if (this.pwd1 == "" || this.pwd2 == "" || this.pwd3 == "") {
					uni.showToast({
						title: "输入不能为空哦!",
						icon: "none",
						duration: 3000
					})
					return;
				}
				var pat = /^[a-zA-Z][a-zA-Z0-9_!@#$%^&*()-+=,.]{5,17}$/;
				if (!pat.test(this.pwd2)) {
					uni.showToast({
						title: "密码不符合要求",
						icon: "none",
						duration: 3000
					})
					return;
				}
				if (this.pwd2 != this.pwd3) {
					uni.showToast({
						title: "两次输入的密码不一致!",
						icon: "none",
						duration: 3000,
					})
					return;
				}
				let params = {
					username: stuid,
					pwd: this.pwd1
				}
				this.$request.post(HNIT_URL + "wx/queryPwdBysys", params).then(res => {
					if (res.code == 1) {
						let par = {
							username: stuid,
							pwd: this.pwd2
						}
						this.$request.post(HNIT_URL + "wx/updatePwdBysys", par).then(rs => {
							uni.showToast({
								title: rs.msg,
								icon: "none",
								duration: 3000
							})
							uni.removeStorageSync(STUNAME)
							uni.removeStorageSync(MONITOR)
							uni.removeStorageSync(IDENTITY)
							uni.removeStorageSync(TNAME)
							uni.removeStorageSync(SESSION_KEY)
							uni.removeStorageSync(OPENID)
							uni.removeStorageSync(WXNAME)
							uni.removeStorageSync(AVATARURL)
							setTimeout(function() {
								uni.reLaunch({
									url: "../../../pages/login/login"
								})
							}, 3001)
						})
					} else {
						uni.showToast({
							title: "原密码输入错误",
							icon: "none",
							duration: 3000
						})
					}

				})
			},
		},

	}
</script>

<style>
	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}

	.back {
		float: left;
		width: 80rpx;
		margin-top: 99rpx;
		height: 58rpx;
		margin-left: -640rpx;
		border-radius: 80rpx;
		backdrop-filter: blur(5px);
		/* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
		border: 1rpx #c6c6c6 solid;
	}

	.pwdtext {
		margin-top: 20rpx;
		font-size: 45rpx;
		/* font-weight: bold; */
		margin-left: 30rpx;
		color: #000000;
		font-family: FZSuXSLSJW;
	}

	.inputstyle {
		font-size: 40rpx;
		text-align: center;
		padding-top: 20rpx;
	}

	.pwdinput {
		margin-left: 20rpx;
		margin-top: 30rpx;
		width: 675rpx;
		height: 80rpx;
		border-radius: 30rpx;
		background-color: #e8e8e8;
	}

	.fun {
		/* backdrop-filter: blur(5px); /* 设置高斯模糊效果
		background-color: rgba(255, 255, 255, 0.5); */
		background-color: white;
		border-radius: 50rpx;
		width: 95%;
		height: 660rpx;
		margin-top: 50rpx;
	}

	.toptitle {
		margin-top: -60rpx;
		color: #626262;
		/* color: rgba(255, 255, 255, 0.9); 
		font-weight: bold;*/
		font-size: 50rpx;
		font-family: FZSuXSLSJW;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	page {
		background-color: #ebebeb;
	}

	@keyframes aurora {
		0% {
			background-position-y: 0;
		}

		50% {
			background-position-y: 100%;
		}

		100% {
			background-position-y: 0;
		}
	}
</style>